<script lang="ts" setup>
  import { ref } from 'vue'

  // 这不是响应式数据
  const tabMetas = [
    { title: '密码登录', subTitle: '验证码登录' },
    { title: '验证码登录', subTitle: '密码登录' },
  ]

  const current = ref(1) // 表示当前处于tabMetas的哪一种情况
</script>

<template>
  <!-- 建议  view代替 -->
  <!-- <div class="user-login"></div> -->

  <view class="user-login">
    <!-- 开启flex后 子结构就会一行布局 -->
    <view class="login-type">
      <view class="title">{{ tabMetas[current].title }}</view>
      <view class="type" @click="current = current === 0 ? 1 : 0">
        <text>{{ tabMetas[current].subTitle }}</text>
        <!-- 图标   自己的图标 iconfont   xxx            官方图标 -->
        <uni-icons type="right" color="3c3e42"></uni-icons>
      </view>
    </view>

    <!-- 切换登录结构 -->
    <custom-mobile v-if="current === 1"></custom-mobile>
    <custom-password v-else></custom-password>
  </view>

  <view class="social-login">
    <view class="legend">
      <text class="text">三方登录</text>
    </view>
    <view class="social-account">
      <view class="icon">
        <uni-icons type="weixin" color="#07c160" size="30" />
      </view>
      <view class="icon">
        <uni-icons type="qq" color="#00b0fb" size="30" />
      </view>
      <view class="icon">
        <uni-icons type="weibo" color="#fb6622" size="30" />
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  // 样式中引入样式  @import
  @import './index.scss';

  // .user-login .login-type .title {

  // }
</style>
